<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<!-- 引入样式-->
		<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/theme-chalk/index.min.css">
		<!-- 引入组件库 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.1/index.min.js"></script>

		<link rel="stylesheet" href="/layui/css/layui.css" />
		<script type="text/javascript" src="/layui/layui.js"></script>
		<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="/css/index.css" />
		<script src="/js/modernizr-custom-v2.7.1.min.js"></script>
		<link rel="stylesheet" href="/css/goodsMess.css" />
		<script>
			$(function() {
				var $miaobian = $('.Xcontent08>div');
				var $huantu = $('.Xcontent06>img');
				var $miaobian1 = $('.Xcontent26>div');
				$miaobian.mousemove(function() {
					miaobian(this);
				});
				$miaobian1.click(function() {
					miaobian1(this);
				});

				function miaobian(thisMb) {
					for(var i = 0; i < $miaobian.length; i++) {
						$miaobian[i].style.borderColor = '#dedede';
					}
					thisMb.style.borderColor = '#cd2426';

					$huantu[0].src = thisMb.children[0].src;
				}

				function miaobian1(thisMb1) {
					for(var i = 0; i < $miaobian1.length; i++) {
						$miaobian1[i].style.borderColor = '#dedede';
					}
					//		thisMb.style.borderColor = '#cd2426';
					$miaobian.css('border-color', '#dedede');
					thisMb1.style.borderColor = '#cd2426';
					$huantu[0].src = thisMb1.children[0].src;
				}
				$(".Xcontent33").click(function() {
					var value = parseInt($('.input').val()) + 1;
					$('.input').val(value);
				})

				$(".Xcontent32").click(function() {
					var num = $(".input").val()
					if(num > 0) {
						$(".input").val(num - 1);
					}

				})
				//回到顶部按钮
				$("#my-backtop").click(function() {
					$("html,body").animate({
						scrollTop: 0
					}, 500);
				});

				//鼠标滚动事件，显式回到顶部按钮
			});
		</script>
	</head>

	<body>

		<!-- 引入头部 -->
		<div>
			<iframe src="/header" scrolling="no" style="height:180px;width: 100%;border: 0px;"></iframe>
		</div>
		<!--引入头部end-->

		<div class="my-index-body" style="background-color: #fff;">
			<!--横向导航栏-->
			<div class="my-daohang1">
				<div class="layui-container">
					<div class="layui-row">
						<!--菜单-->
						<div class="layui-col-md9" style="height: 50px;">
							<a href="/index">首页</a>
							<a href="">优抢购</a>
							<a href="">聚划算</a>
							<a href="">大转盘</a>
							<a href="">会员折扣</a>
							<a href="">买家秀</a>
						</div>
					</div>
				</div>
			</div>
			<!--横向导航end-->

			<!--促销活动部分-->
			<div class="my-cuxiaodiv">

			</div>
			<!--促销活动部分end-->

			<!-- 商品主题  -->
			<div class="Xcontent" style="height: 480px;margin: 20px auto;">
				<ul class="Xcontent01">

					<div class="Xcontent06"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X1.png"></div>
					<ol class="Xcontent08" >
						<div class="Xcontent07"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X1.png"></div>
						<div class="Xcontent09"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X7.png"></div>
						<div class="Xcontent10"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X8.png"></div>
						<div class="Xcontent11"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X9.png"></div>
						<div class="Xcontent12"><img th:src="${goodsMessage.pic}" src="/images/shangpinxiangqing/X10.png"></div>
					</ol>
					<ol class="Xcontent13">
						<div class="Xcontent14">
							<a href="#">
								<p th:text="${goodsMessage.name}">新物品</p>
							</a>
						</div>
						<div class="Xcontent15"><img src="/images/shangpinxiangqing/X11.png"></div>
						<div class="Xcontent16">
							<p>购买商品，就来小米商城&nbsp;&nbsp;&nbsp;Sandwich™</p>
						</div>
						<div class="Xcontent17">
							<p class="Xcontent18">售价</p>
							<p class="Xcontent19">￥<span th:text="${goodsMessage.price}">69.00</span></p>
							<div class="Xcontent20">
								<p class="Xcontent21">促销</p>
								<img src="/images/shangpinxiangqing/X12.png">
								<p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
							</div>
							<div class="Xcontent23">
								<p class="Xcontent24">服务</p>
								<p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp; 满88元免邮</p>
							</div>

						</div>
						<div class="Xcontent26">
							<p class="Xcontent27">颜色</p>
							<div class="Xcontent28"><img src="/images/shangpinxiangqing/X14.png"></div>
							<div class="Xcontent29"><img src="/images/shangpinxiangqing/X1.png"></div>
						</div>
						<div class="Xcontent30">
							<p class="Xcontent31">数量</p>
							<div class="Xcontent32"><img src="/images/shangpinxiangqing/X15.png"></div>
							<form>
								<input class="input" value="1"></form>
							<div class="Xcontent33"><img src="/images/shangpinxiangqing/16.png"></div>

						</div>
						<div class="Xcontent34">
							<a th:href="'/buyOne/'+${goodsMessage.id}" href="/buyOne" class="layui-btn layui-btn-normal">立即购买</a>
						</div>
						<div class="Xcontent35">
							<a th:href="'/addShopping/'+${goodsMessage.id}" href="" class="layui-btn layui-btn-danger" style="color: #fff;">
								加入购物车
							</a>
						</div>
					</ol>
				</ul>
			</div>
			<!-- 商品主题end -->

			<!-- 产品详情 -->
			<div class="layui-container" style="top:20px;">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				  <legend>产品详情</legend>
				</fieldset>
				<div class="layui-row">
					<div class="layui-col-md3" style="border: 1px solid #E5E5E5;">
						<p>在线客服：</p>
					</div>
					<div class="layui-col-md9" style="padding-left: 50px;font-size: 16px;" >
						产品详情<br />
						<img src="/img/xq01.jpg" />
						<img src="/img/xq02.jpg" />
						<img src="/img/xq03.jpg" />
					</div>
				</div>
			</div>
			<!-- 产品详情end -->

			<!--引入底部-->
			<div class="my-footer">
				<iframe src="/footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
			</div>
			<!--引入底部end-->

			<!--回到顶部按钮-->
			<div id="my-backtop">
				<span class="layui-icon layui-icon-up"></span>
			</div>

		</div>

	</body>
	<script>
		layui.use(['element', 'carousel', 'laypage'], function() {
			var element = layui.element;
			var carousel = layui.carousel;
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem: 'test1',
				count: 100,
				theme: '#FF5722'
			});

			//建造实例
			carousel.render({
				elem: '#test1',
				width: '100%' //设置容器宽度
					,
				arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});
		});
	</script>

</html>